<template>
  <view class="start-repair">
    <view class="info-content">
      <view class="info-main">
        <form @submit="formSubmit" @reset="formReset">
          <view class="uni-form-item uni-column">
            <view class="item-content">
              <view class="box-left-icon">
                <text class="iconfont icon-bitian icon1"></text>
              </view>
              <view class="title item-content-title">外出日期</view>
              <view class="item-content-input">
                <view class="uni-input">
                  <picker mode="date" :value="date" @change="bindDateChange">
                    <view class="uni-input">{{ date }}</view>
                  </picker>
                </view>
              </view>
            </view>
          </view>
          <view class="uni-form-item uni-column">
            <view class="item-content">
              <view class="box-left-icon">
                <text class="iconfont icon-bitian icon1"></text>
              </view>
              <view class="title item-content-title">预计时间</view>
              <view class="item-content-input">
                <view class="uni-input">
                  <picker
                    mode="time"
                    :value="time"
                    name="time"
                    @change="bindTimeChange"
                  >
                    <view class="uni-input">{{ time }}</view>
                  </picker>
                </view>
              </view>
            </view>
          </view>
          <view class="uni-form-item uni-column">
            <view class="item-content">
              <view class="box-left-icon">
                <text class="iconfont icon-bitian icon1"></text>
              </view>
              <view class="title item-content-title">电话</view>
              <view class="item-content-input">
                <input class="uni-input" name="phone" placeholder="输入电话" />
              </view>
            </view>
          </view>
          <view class="min" v-show="showPhone">请正确输入电话号码</view>
          <view class="uni-form-item uni-column">
            <view class="item-content">
              <view class="box-left-icon">
                <text class="iconfont icon-bitian icon1"></text>
              </view>
              <view class="title title2">交通工具</view>
            </view>
            <checkbox-group name="checkbox">
              <view>
                <label>
                  <checkbox
                    value="私家车"
                    checked="true"
                    color="#20b1ff"
                    style="transform: scale(0.7)"
                  />私家车
                </label>
                <label>
                  <checkbox
                    value="高铁"
                    color="#20b1ff"
                    style="transform: scale(0.7)"
                  />高铁
                </label>
                <label>
                  <checkbox
                    value="火车"
                    color="#20b1ff"
                    style="transform: scale(0.7)"
                  />火车
                </label>
              </view>
              <label>
                <checkbox
                  value="公交车"
                  color="#20b1ff"
                  style="transform: scale(0.7)"
                />公交车
              </label>
              <label>
                <checkbox
                  value="飞机"
                  color="#20b1ff"
                  style="transform: scale(0.7)"
                />飞机
              </label>
              <label>
                <checkbox
                  value="其他"
                  color="#20b1ff"
                  style="transform: scale(0.7)"
                />其他
              </label>
            </checkbox-group>
          </view>
          <view class="min2" v-show="showGender">请选择交通工具</view>

          <view class="uni-form-item uni-column">
            <view class="item-content">
              <view class="box-left-icon">
                <text class="iconfont icon-bitian icon1"></text>
              </view>
              <view class="title title2">目的地</view>
            </view>
            <view class="uni-textarea1">
              <textarea
                class="uni-width"
                placeholder-style="color:#666"
                placeholder="在此输入"
                name="address"
              />
            </view>
          </view>
          <view class="min2" v-show="showAddress">请输入地址</view>
          <view class="uni-btn-v">
            <button plain="true" form-type="submit" :disabled="isBtn">
              立即申请
            </button>

            <!-- <button type="default" form-type="reset">Reset</button> -->
          </view>
        </form>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      showName: false,
      showGender: false,
      showPhone: false,
      showAddress: false,
      time: "18:01",
      date: "",
      openid: "",
      name: "",
      applyTime: "",
      isBtn: false,
    };
  },
  onShow() {
    this.dataIndex = 1;
    this.dataIndexOne = 4;
    let getTime = new Date();
    this.time = `${this.appendZero(getTime.getHours())}:${this.appendZero(
      getTime.getMinutes()
    )}`;
    this.date = `${getTime.getFullYear()}-${this.appendZero(
      getTime.getMonth() + 1
    )}-${this.appendZero(getTime.getDate())}`;
    this.applyTime = this.date + " " + this.time;
    // console.log(this.time);
    this.getPeopleInfo();
    // console.log(num + "5555");
  },
  methods: {
    appendZero(obj) {
      if (obj < 10) {
        return "0" + obj;
      } else {
        return obj;
      }
    },
    getPeopleInfo() {
      // console.log("555");
      let that = this;
      uni.getStorage({
        key: "openid",
        success: function (res) {
          // console.log(res);
          that.openid = res.data;
          that
            .$MyRequest({
              url: "/get_all_people",
              method: "POST",
              data: {
                openid: that.openid,
              },
            })
            .then((res) => {
              // console.log(res.data.data[0].name);
              that.name = res.data.data[0].name;
            });
        },
        fail: (err) => {},
      });
    },
    //提交请求
    setRequest(formdata) {
      // console.log(this.date + " " + formdata.time);
      // console.log(formdata.checkbox);
      this.isBtn = true;
      this.$MyRequest({
        url: "/set_go_out_go",
        method: "POST",
        data: {
          name: this.name,
          openid: this.openid,
          time: this.date + " " + formdata.time,
          applyTime: this.applyTime,
          phone: formdata.phone,
          address: formdata.address,
          checkbox: formdata.checkbox.join(","),
        },
      }).then((result) => {
        if (result.data.mesg == "ok") {
          uni.showToast({
            title: "已提交申请",
            duration: 1500,
          });
          setTimeout(() => {
            uni.navigateBack({ delta: 1 });
          }, 1500);
        }
      });
    },
    formSubmit(e) {
      // console.log(
      //   "form发生了submit事件，携带数据为：" + JSON.stringify(e.detail.value)
      // );
      let formdata = e.detail.value;
      // console.log(formdata.checkbox.join(","));
      // console.log(JSON.stringify(formdata.checkbox));
      // this.testForm(formdata);
      if (this.testForm(formdata)) {
        // console.log("5444");
        this.setRequest(formdata);
      }
    },
    testForm(formdata) {
      // let formdata = e.detail.value;
      let isTest = false;
	  //数据检验
      let phoneReg = /^1\d{10}$/;
      if (!phoneReg.test(formdata.phone)) {
        this.showPhone = true;
        return false;
        isTest = false;
      } else {
        this.showPhone = false;
        isTest = true;
      }
      if (formdata.checkbox.length == 0) {
        this.showGender = true;
        return false;
        isTest = false;
      } else {
        this.showGender = false;
        isTest = true;
      }
      if (formdata.address.length < 2) {
        this.showAddress = true;
        return false;
        isTest = false;
      } else {
        this.showAddress = false;
        isTest = true;
      }
      return isTest;
      // console.log(formdata);
      // console.log(this.date);
    },
    bindDateChange(e) {
      this.date = e.target.value;
    },
    bindTimeChange(e) {
      this.time = e.target.value;
    },
  },
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.start-repair {
  width: 100%;
  height: 100vh;
  background-color: $uni-color-indexBg;
}
.info-content {
  margin: 0 15rpx;
  padding-top: 10px;

  .info-main {
    padding: 0 15rpx;
    background-color: $uni-color-mainBg;
    box-sizing: border-box;
    border-radius: 5px;
    .uni-column {
      border-bottom: 1rpx solid #d8d8de;
      padding: 12rpx 0;
      .uni-label-pointer {
        font-size: 28rpx;
        .uni-checkbox-input {
          width: 20px;
          height: 20px;
        }
      }
      .title {
        // font-size: 55rpx;
        font-size: 30rpx;
        padding: 0 0 15rpx 0;
      }
      .item-content {
        display: flex;
        align-items: center;
        .title {
          // font-size: 55rpx;
          font-size: 30rpx;
          padding: 20rpx 0;
        }

        .item-content-input {
          position: absolute;
          left: 340rpx;
          .uni-input {
            // padding-left: 40rpx;
            font-size: 30rpx;
            color: #c0c0c0;
          }
        }
      }

      // .title {
      //   padding: 30rpx 0;
      // }
    }
    .uni-btn-v {
      padding: 50rpx 0 20rpx 0;
      // border-top: 0 20rpx solid;
      button {
        width: 85%;
        border-radius: 5px;
        font-size: 30rpx;
        color: #fff;
        // size: 10;
        height: 82rpx;
        @include center;
        background-color: $uni-color-primary;
        border: none;
      }
    }
  }
  .info-step {
    // margin-top: 20%;
    width: 100%;
    padding: 30rpx 0;
    box-sizing: border-box;
    // marggn-top: 100rpx;
    // background-color: $uni-color-mainBg;
    .uni-steps {
      // height: 200rpx;
      background-color: $uni-color-mainBg;
      active-color: $uni-color-primary;
      // transform: scale(1.1);
      padding: 60rpx 0;

      box-sizing: border-box;
      // @include center;
      // font-size:80rpx;
    }
  }
  .info-step-test {
    background-color: $uni-color-mainBg;
    padding: 0 0 20rpx 0;
    @include center;
    color: $uni-color-warning;
  }
}
.uni-width {
  // width: 95%;
  width: 100% !important;
  font-size: 30rpx;
  height: 80px;
  // padding: 10rpx 15rpx;
}
.uni-textarea1 {
  margin: 0 auto;
  // box-sizing: border-box;
  border-radius: 2%;
  background-color: $uni-bg-color-hover;
  padding: 10rpx 15rpx;
  font-size: 12rpx;
  height: 80px;
}
.min {
  font-size: 19rpx;
  left: 340rpx;
  color: #fa3534;
  position: absolute;

  // font-weight: bold;
}
.min2 {
  font-size: 19rpx;

  color: #fa3534;
}
</style>
